<template>
    <div class="earthPanel" ref="earth"></div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
import "./china.js";
import opt from "./opt";
import data from "./data";

let localParam = {};

let storeChart = {};
export default {
    name:'country',
    data() {
        return {
            random: "",
        };
    },
    mounted() {
        localParam = {
            data: data,
        };
        //this.initChart(localParam);
        this.$nextTick(() => {
            window.addEventListener("resize", ()=> {
                this.handleSize();
            });
        });
    },
    methods: {
        initChart(params) {
            let paramRender = { ...localParam, ...params };
            this.random = Math.ceil(Math.random() * 10000);
            if (storeChart[this.random]) {
                storeChart[this.random].clear();
            } else {
                storeChart[this.random] = echarts.init(this.$el);
            }
            storeChart[this.random].setOption(opt(paramRender), true);
        },
        handleSize(){
            storeChart[this.random].resize();
        }
    },
    beforeDestroy() {
        if (storeChart[this.random]) {
            storeChart[this.random].dispose();
            storeChart[this.random] = null;
            storeChart = {};
            this.random = "";
        }
    },
};
</script>

<style lang="scss" scoped>
.earthPanel {
    height: 690px;
    width: 100%;
}
</style>

